<template>
  <div class="dj-recommend">
    <main-table>
      <a href="javascripr:;" class="dj-a" slot="left">推荐节目</a>
      <a href="" slot="right" style="color: #666">更多></a>
      <div slot="body" class="body">
        <el-table
          :data="recommend"
          stripe
          style="width: 100%"
          :show-header="false"
          :row-style="{ height: '30px' }"
          :cell-style="{ padding: '6px 0' }"
        >
          <el-table-column width="426px">
            <template v-slot="scope">
              <div class="box">
                <div class="img">
                  <el-image :src="scope.row.coverUrl" lazy />
                  <div class="play" @click="play(scope.row)"></div>
                </div>

                <div class="p">
                  <a href="javascript:;" class="a1">{{ scope.row.name }}</a>
                  <a href="javascript:;" class="a2">{{
                    scope.row.radio.name
                  }}</a>
                </div>
                <div class="dj-border">
                  {{ scope.row.radio.category }}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main-table>
  </div>
</template>

<script>
import { getSongURL } from '@/api/api.js'
import mainTable from '../../../components/common/mainTable.vue'
export default {
  components: { mainTable },
  props: {
    recommend: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    async play(item) {
      // console.log(item)
      const res = await getSongURL(item.id)
      console.log(res)
    }
  }
}
</script>
<style lang="scss" scoped>
a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}
.dj-recommend {
  width: 426px;

  .dj-a {
    font-size: 24px;
    margin-bottom: 10px;
  }
}
.img {
  width: 40px;
  height: 40px;
  position: relative;
  .el-image {
    width: 100%;
    height: 100%;
  }
  .play {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -11px;
    margin-left: -11px;
    width: 22px;
    height: 22px;
    background: url('https://s2.music.126.net/style/web2/img/iconall.png?dbf3f8c751cd4c6aec1d8bc21b029b41');
    background-position: 0 -85px;
    &:hover {
      cursor: pointer;
    }
  }
}
.box {
  display: flex;
  align-items: center;
  &:hover .play {
    display: block;
  }
}
.p {
  display: flex;
  flex-flow: column;
  width: 254px;
  margin: 1px 0 0 10px;
  .a1,
  .a2,
  .dj-border {
    font-size: 12px;
  }
  .a1 {
    color: #333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
  }
  .a2 {
    color: #999;
  }
}
.dj-border {
  display: flex;
  margin-left: 8px;
  justify-content: center;
  align-items: center;
  color: #999;
  padding: 0 6px;
  height: 18px;
  border: 1px solid #999;
  &:hover {
    cursor: pointer;
    color: #666;
    border: 1px solid #666;
  }
}
</style>
